home *** CD-ROM | disk | FTP | other *** search
/ MacAddict 123 / MacAddict_123_2006_11.iso / Software / Internet & Communication / Sandvox 1.0.4.dmg / Sandvox.app / Contents / Designs / Cathedral.svxDesign / main.css < prev    next >
Cascading Style Sheet File  |  2006-08-04  |  9KB  |  495 lines
  1. /* 
  2.    css Copyright (c) 2005-2006 by Karelia Software. All rights reserved.
  3.    css released under Creative Commons License 
  4.         - http://creativecommons.org/licenses/by-sa/2.5/ 
  5.    All associated graphics belong to their respective owners 
  6.         and are licensed separately. 
  7. */
  8.  
  9. a img { border: none; }
  10.  
  11. /*CATHEDRAL*/
  12.  
  13. /* General styles  */
  14.  
  15. body {
  16.     text-align: center; /*this is for IE5/PC*/
  17.     word-wrap: break-word;
  18. }
  19.  
  20. #page {
  21.     text-align: left; /*this corrects the body text-align selector, strangely not working in IE5.5 though*/
  22. }
  23.  
  24. .clear {
  25.     clear: both;
  26.     height: 10px;
  27. }
  28.  
  29. #page-content a:link { color: #282838; font-weight: bold; text-decoration: none; }
  30. #page-content a:visited { color: #242428; }
  31. #page-content a:hover { text-decoration: underline; }
  32.  
  33. .hidden {
  34.     display: none;
  35. }
  36.  
  37. /* Images embedded in text. "narrow" are 200 pixels wide or smaller. */
  38.  
  39. #main img {
  40.     padding: 10px;
  41.     /* margin: 10px; */
  42.     background: #ebe8e5;
  43. }
  44.  
  45. #main .pagelet img {
  46.     border:none;
  47.     margin: 0;
  48.     padding: 0;
  49. }
  50.  
  51. img.narrow {
  52.     display: block;
  53.     clear: right;
  54.     float: right;
  55. }
  56. img.wide {
  57.     display: block;
  58.     clear: both;
  59. }
  60.  
  61. a img {
  62.     border: 1px solid #282838;
  63. }
  64.  
  65. #main a:hover img {
  66.     background: #ebe8e5 url(c-bk-corner.gif) no-repeat top left;
  67. }
  68.  
  69. /* Block Level formatting, more or less in descending order */
  70.  
  71. * {
  72.     margin: 0;
  73.     padding: 0;
  74. }
  75.  
  76. p {
  77.     margin-bottom: 20px;
  78. }
  79.  
  80. body {
  81.     background: #ebe8e5;
  82.     font-size: 76%;
  83.     color: #43290a;
  84.     font-family: "lucida grande", arial, sans-serif;
  85. }
  86.  
  87.         #page {
  88.             position: relative;
  89.             background: #dfdad5;
  90.             margin: 0 auto;
  91.             padding: 10px;
  92.             width: 769px;
  93.           voice-family: "\"}\"";
  94.           voice-family: inherit;
  95.           width: 749px;
  96.          }
  97.     html>body #page {
  98.           width: 749px;
  99.         }
  100.  
  101.             #page-top {
  102.                 position: relative;
  103.             }
  104.  
  105.                 #title {
  106.                     position: relative;
  107.                     background: #95939e;
  108.                     width: 749px;
  109.                     overflow: hidden;
  110.                 }
  111.  
  112.                     #title a img, #title img {
  113.                         float: right;
  114.                         border:none;
  115.                     }
  116.  
  117.                     #title p {
  118.                         position: relative;
  119.                         top: 0;
  120.                         margin: 15px 0 0 15px;
  121.                         width: 500px;
  122.                         padding: 4px;
  123.                     }
  124.  
  125.                     h1 {
  126.                         position: relative;
  127.                         top: 0;
  128.                         left: 0;
  129.                         width: 500px;
  130.                         padding: 4px;
  131.                         font-size: 1.6em;
  132.                         font-family: Zapfino, "lucida grande", arial, sans-serif;
  133.                         font-weight:normal;
  134.                     }
  135.  
  136.                         h1 a {
  137.                           text-decoration: none;
  138.                           color: #ddd;
  139.                           font-weight: normal;
  140.                             }
  141.  
  142.                     #title h1 {
  143.                         margin: 15px 0 0 15px;
  144.                     }
  145.  
  146.                 #sitemenu-container {
  147.                     clear: both;
  148.                     margin-top: 9px;
  149.                     background: url(c-bk-header-small.jpg) no-repeat;
  150.                     padding-top: 134px;
  151.                     border-bottom: 1px solid #95939e;
  152.                     border-top: 1px solid #ebe8e5;
  153.                 }
  154.  
  155.                 .home-page #sitemenu-container {
  156.                     padding-top: 265px;
  157.                     background: url(c-bk-header.jpg) no-repeat;
  158.                 }
  159.  
  160.                     #sitemenu-content {
  161.                             background: #9796a1;
  162.                             margin-top: 10px;
  163.                     }
  164.  
  165.                         #sitemenu-content ul {
  166.                             background: url(c-bk-nav-bottom.gif) repeat-x bottom;
  167.                             list-style-type: none;
  168.                             padding-top: 12px;
  169.                             padding-bottom: 12px;
  170.                             padding-right:20px;
  171.                             text-align: center;
  172.                         }
  173.  
  174.                         #sitemenu-content li {
  175.                             display: inline;
  176.                             padding: 3px 0;
  177.                             margin: 0 0 0 5px;
  178.                         }
  179.  
  180.                             #sitemenu-content a, li.currentPage span.in {
  181.                                 line-height: 1.5em;
  182.                                 padding-left: 15px;
  183.                             }
  184.  
  185.                             .currentPage span.in {
  186.                                 font-weight: bold;
  187.                                 color: #eee;
  188.                             }
  189.  
  190.                             #sitemenu-content a:link, #sitemenu-content a:visited {
  191.                                 color: #282838;
  192.                                 text-decoration: none;
  193.                             }
  194.  
  195.                             #sitemenu-content a:hover, a:focus, a:active {
  196.                                 background: url(c-glyph.gif) no-repeat left;
  197.                             }
  198.  
  199.             #page-content ul {
  200.                 margin-top: 15px;
  201.             }
  202.             
  203.             #page-content ul ul {
  204.                 margin-top:2px;
  205.             }
  206.             
  207.             #page-content li {
  208.                 font-size: 1em;
  209.                 list-style-image: url(c-bullet.gif);
  210.                 margin: 0 0 0 20px;
  211.                 border-bottom: 1px dotted #777;
  212.                 padding: 4px 0 4px 5px;
  213.             }
  214.             /* IE Hack */
  215.             /* Hides from IE5-mac \*/
  216.             * html #page-content li {
  217.                 border-bottom: 1px solid #666;
  218.             }
  219.             /* End hide from IE5-mac */
  220.  
  221.             ul ul li {
  222.                 border:none!important;
  223.             }
  224.  
  225.             #page-content li h3 {
  226.                 font-size: 1em;
  227.             }
  228.  
  229.             #page-content li:hover {
  230.                 background: #ebe8e5;
  231.             }
  232.  
  233.             #sidebar-container {
  234.                 float: left;
  235.                 width: 260px;
  236.                 margin: 0;
  237.                 padding: 0;
  238.                 min-height: 50px; /*for newer browsers*/
  239.             }
  240.  
  241.             /* IE Hack */
  242.             /* Hides from IE5-mac \*/
  243.             * html #sidebar-container {
  244.                     height: 50px; /*for IE, treats height as min-height*/
  245.             }
  246.             /* End hide from IE5-mac */
  247.  
  248.  
  249.                 #sidebar {
  250.                     background: url(c-bk-sidebar-main.gif) repeat-y;
  251.                     color: #43290a;
  252.                     padding: 25px;
  253.                     font-size: .8em;
  254.                     margin-right: 10px;
  255.                 }
  256.                 #sidebar-container:after { content: url("bk-clear.gif"); }
  257.  
  258.                         .pagelet {
  259.                             width: 200px;
  260.                             word-wrap: break-word;
  261.                             overflow: hidden;
  262.                             margin-bottom: 15px;
  263.                         }
  264.  
  265.                         .pagelet img {
  266.                             border:none;
  267.                         }
  268.  
  269.                         #main {
  270.                             padding: 25px 20px 20px 20px;
  271.                             word-wrap: break-word;
  272.                         }
  273.  
  274.                     #main .pagelet {
  275.                         float: left;
  276.                         margin: 10px;
  277.                         padding: 10px;
  278.                     }
  279.                         
  280.                     #main .pagelet.bordered {
  281.                         border: 1px dotted ;
  282.                         background:transparent
  283.                     }
  284.  
  285.                     #sidebar .pagelet {
  286.                         padding-bottom: 15px;
  287.                     }
  288.  
  289.                     #sidebar .pagelet.bordered {
  290.                         border: 1px dotted;
  291.                     }
  292.                     
  293.                         #sidebar .pagelet.bordered p {
  294.                             padding:0px 5px;
  295.                         }
  296.  
  297.                         .pagelet h4 {
  298.                             padding: 2px 4px;
  299.                             margin-bottom: 5px;
  300.                         }
  301.  
  302.                         #sidebar .pagelet h4 {
  303.                             background: #ebe8e5 url(c-bk-heading-small.gif) no-repeat;
  304.                             min-height: 18px;
  305.                             padding-left: 24px;
  306.                             font-size: 110%;
  307.                         }
  308.  
  309.                 body.allow-sidebar #main {
  310.                     float: left;
  311.                     width: 449px;
  312.                 }
  313.  
  314.                 body.no-sidebar #main h2 {
  315.                     text-align: center;
  316.                     font-size: 1.5em;
  317.                 }
  318.  
  319.                 body.allow-sidebar #main h2 {
  320.                     color: #282838;
  321.                     font-size: 1.5em;
  322.                     background: #ebe8e5 url(c-bk-heading.gif) no-repeat;
  323.                     padding: 8px 0 6px 55px;
  324.                     min-height: 35px;
  325.                     voice-family: "\"}\"";
  326.                     voice-family: inherit;
  327.                     height: 30px;
  328.                 }
  329.                 html>body.allow-sidebar #main h2 {
  330.                     height: 30px;
  331.                 }
  332.  
  333.                     h2, h3 {
  334.                         margin-bottom: 15px;
  335.                     }
  336.  
  337.                         .article {
  338.                             border-bottom: 3px solid #282838;
  339.                             overflow:auto; 
  340.                         }
  341.                             .article-thumbnail {
  342.                                 float:left;
  343.                             }
  344.  
  345.                             .callout .pagelet {
  346.                                 background:#dfdad5;
  347.                                 clear:left;
  348.                                 float:left;
  349.                                 width:200px;
  350.                             }
  351.  
  352.             #page-bottom {
  353.                     clear: both;
  354.                     background: #9796a1;
  355.                     padding: 15px 0px;
  356.                     background: #9796a1 url(c-bk-nav-bottom.gif) repeat-x bottom;
  357.             }
  358.  
  359.                 #page-bottom p {
  360.                     padding: 0 15px 0px 25px;
  361.                     margin-bottom: 0;
  362.                 }
  363.  
  364. /* Other specific classes nested with an .article */
  365.  
  366. .ImageElement, .VideoElement {
  367.     text-align: center; 
  368.     clear: both;
  369. }
  370.  
  371.  
  372. /* Used on Photo Grid Pages ... */
  373. .photogrid-index {
  374.     text-align:center;
  375.     margin:auto;
  376. }
  377.  
  378. .photogrid-index a {
  379.     font-weight:normal !important;
  380. }
  381.  
  382. .gridItem {
  383.     float:left;
  384.     position:relative;
  385.     width:145px;
  386.     height:210px;
  387.      overflow:hidden;
  388.     padding:2px;
  389. }
  390.  
  391. body.no-sidebar .gridItem {
  392.     margin:0px 14px;
  393. }
  394.  
  395. .gridItem h3 {
  396.     font-size:1em;
  397.     font-weight:normal;
  398.     position:absolute;
  399.     top:165px;
  400.     width:126px;
  401.     padding:0px 10px;
  402. }
  403.  
  404. .gridItem img {
  405.     border: 1px solid rgb(80, 80, 80);
  406.     margin: auto !important; /* need !important here to override #main img */    
  407.     padding: 9px !important; /* 1px less than usual to fit 3 images in a row */
  408.     display:block;
  409.     position: absolute;
  410.     top: 0;
  411.     bottom: 40px;
  412.     right: 0;
  413.     left: 0;
  414. }
  415.  
  416. /* IE Hack */
  417. /* Hides from IE5-mac \*/
  418. * html body.no-sidebar .gridItem {
  419.     margin:0px 11px;
  420. }
  421.  
  422. * html .gridItem img {
  423.     position: relative;
  424.     padding:8px !important;
  425.     top:5px;
  426. }
  427.  
  428. * html .gridItem h3 {
  429.     position: relative;
  430.     top: 10px;
  431. }
  432. /* End hide from IE5-mac */
  433.  
  434.  
  435. /* Used on index summary pages */
  436.  
  437.         .listing-index li h3 a {
  438.             text-decoration:none;
  439.             font-size:1em;
  440.             font-weight:normal;
  441.         }
  442.  
  443. /* Individual Photo Pages */
  444.  
  445. .photo-navigation {
  446.     margin-left: 220px;
  447.     padding:0px;
  448.     background:red;
  449. }
  450.  
  451. .allow-sidebar .photo-navigation {
  452.     margin-left:95px;
  453. }
  454.  
  455.     .photo-navigation a { 
  456.         display: block;  
  457.         text-indent: -5000px; 
  458.         height:100%; 
  459.         width:100%;
  460. }
  461.  
  462.     #previous-photo, #next-photo, #photo-list {
  463.         float: left;
  464.         height: 60px;
  465.         margin: 0 10px 0 10px;
  466.     }
  467.  
  468.     #previous-photo    {
  469.         width: 100px;
  470.         background: url(c-button-previous-disabled.gif) no-repeat;
  471.     }
  472.  
  473.     #previous-photo a {
  474.         background: url(c-button-previous.gif) no-repeat;
  475.     }
  476.     
  477.     #next-photo {
  478.         width: 50px;
  479.         background: url(c-button-next-disabled.gif) no-repeat;
  480.     }
  481.  
  482.     #next-photo a {
  483.         background: url(c-button-next.gif) no-repeat;
  484.     }
  485.  
  486.     #photo-list {
  487.         width: 50px;
  488.         background: url(c-button-list-disabled.gif) no-repeat;
  489.     }
  490.     
  491.     #photo-list a {
  492.         background: url(c-button-list.gif) no-repeat;
  493.     }
  494.  
  495.